<template>
    <div id="table">
      <el-table
      :data="tableData"
      style="width: 100%;">
      <el-table-column
      type="index"
      width="50">
      </el-table-column>
      <el-table-column
          prop="name"
          label="名称"
          width="180">
      </el-table-column>
      <el-table-column
          prop="nat"
          label="规格"
          width="240">
      </el-table-column>
      <el-table-column
          width="180"
          label="图片">
          <template slot-scope="scope">
          <el-image
              style="width: 100px; height: 100px"
              :src=scope.row.pic
              :fit="fill"></el-image>
          </template>
      </el-table-column>
      <el-table-column
          prop="price"
          label="单价"
          width="70">
      </el-table-column>
      <el-table-column
          prop="number"
          label="数量"
          width="180">
          <template slot-scope="scope">
          <el-input-number v-model=scope.row.number @change="handleClick(scope.row)" :min="0" :max="10" size="small"></el-input-number>
          </template>
      </el-table-column>
      <el-table-column
          label="小计">
          <template slot-scope="scope">
          <div>{{scope.row.number * scope.row.price}}</div>
          </template>
      </el-table-column>
      <el-table-column
          label="操作"
          width="100">
          <template slot-scope="scope">
          <el-button  @onclick="deleteData(scope.row)" type="text"  size="small">删除</el-button>
          </template>
      </el-table-column>
      </el-table>

      <div id="tj">
      <span id="sum">共{{getsum()}} 件商品</span>
      <span id="sum">共计 
        <span id="kk">
          ￥{{getnum()}} 
        </span> 
        元</span>
        <el-button type="danger">结算</el-button>
      </div>
     
  </div>
</template>

<script>
export default {
  methods: {
      handleClick(row) {
        this.tableData.number = row.number
      },
      deleteData(row){
        console.log(row)
      },
      getsum(){
        var res = 0;
        for(var i = 0;i< this.tableData.length;i++){
          res += this.tableData[i].number
        }
        return res
      },
      getnum(){
        var res = 0;
        for(var i = 0;i< this.tableData.length;i++){
          res += this.tableData[i].number * this.tableData[i].price
        }
        return res
      }
    },
    data(){
        return{
          tableData: [{
            name: 'Redmi K60',
            nat:"Redmi K60 骁龙8+处理器 2K高光屏 6400万超清相机 5500mAh长续航 12GB+256GB 墨羽 小米红米5G",
            price:2699.00,
            pic:"https://img10.360buyimg.com/n1/s450x450_jfs/t1/107679/35/17447/52278/640aedadFa2ebfd0d/b1690728526b34f1.jpg.avif",
            number:1,
          }, {
            name: 'OPPO K10x',
            nat:"OPPO K10x 极光 8GB+128GB 67W超级闪充 5000mAh长续航 120Hz高帧屏 6400万三摄 高通骁龙695 拍照 5G手机",
            price:1399.00,
            pic:"https://img12.360buyimg.com/n7/jfs/t1/206618/15/15663/44400/640d6baaF77c02682/c99a1cc954c6138d.jpg",
            number:1,
          }, {
            name: '荣耀80',
            nat:"荣耀80 1.6亿像素超清主摄 AI Vlog视频大师 全新Magic OS 7.0系统 5G手机 12GB+512GB 墨玉青",
            price:3099.00,
            pic:"https://img13.360buyimg.com/n7/jfs/t1/61042/4/22800/45568/6386bd5aE804499cd/63be0cd79f1bd80e.jpg",
            number:1,
          }, {
            name: '荣耀70',
            nat:"荣耀70 IMX800三主摄 双曲屏设计 高通骁龙778G Plus 66W快充 5G手机 12GB+256GB 流光水晶",
            price:2109.00,
            pic:"https://img13.360buyimg.com/n7/jfs/t1/214259/27/22288/64067/634d23b8E33178641/67710bb3d1124945.jpg",
            number:1,
          }]
        }
    }
}
</script>

<style>
#tj{
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 17px;
  text-align: right;
  margin-top:20px ;
}
#kk{
  color: red;
  font-size: 20px;
}
</style>